<template>
	<div>
		<div class="content_first">
			<div class="content_left">
				<!-- <el-row :gutter="15">
					<el-col :span="7">
						<el-card>
							<div class="title">访问量</div>
							<div class="miaoshu">本站最近半个月访问数据</div>
							<visit-chart></visit-chart>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card>
							<div class="title">分布</div>
							<div class="miaoshu">访问ip分布区域数据</div>
							<area-chart></area-chart>
						</el-card>
					</el-col>
					<el-col :span="5">
						<el-card>
							<div class="content-item">
								<div class="title">访问量</div>
								<div class="miaoshu">本站最近半个月访问数据</div>
							</div>
							<div class="content-item">
								<div class="title">访问量</div>
								<div class="miaoshu">本站最近半个月访问数据</div>
							</div>
							<div class="content-item">
								<div class="title">访问量</div>
								<div class="miaoshu">本站最近半个月访问数据</div>
							</div>
						</el-card>
					</el-col>
				</el-row> -->
			</div>
		</div>
		<div class="content_second">
			<div style="margin-bottom: 15px">1.菜单与路由分离，菜单由后端返回(前端组件与菜单进行匹配)</div>
			<div>2.由后端返回菜单路由，前端将动态路由转换成视图组件添加到router实例</div>
		</div>
	</div>
</template>

<script>
import AreaChart from "../components/echarts/areaChart.vue";
import visitChart from "../components/echarts/visitChart.vue";
import { myMenuList } from "../api/login";
export default {
	components: { visitChart, AreaChart },
	data() {
		return {
			myMenuList: []
		};
	},
	created() {
		this.clearBreadcrumb();
		this.getMyMenuList()
	},
	methods: {
		clearBreadcrumb() {
			this.$store.commit("app/SET_BREADCRUMB", []);
		},
		// 在首页查询权限菜单和按钮列表
		async getMyMenuList() {
			const res = await myMenuList();
			this.myMenuList = res.data;
		},
		getMyBtnList() {},
		onTest() {
			this.$router.push("/test");
		}
	}
};
</script>

<style lang="scss" scoped>
.content_first {
	// width: 100%;
	// display: flex;
	// justify-content: space-between;
	// .content_left {
	// 	// flex: 1;
	// 	// padding-right: 15px;
	// 	width: calc(100% -320px);
	// }
	.content_right {
		width: 320px;
		height: 340px;
		// margin-left: 15px;
	}
}
.title {
	font-weight: bold;
	margin-bottom: 5px;
}
.miaoshu {
	font-size: 12px;
	margin-bottom: 20px;
}
</style>
